<template>
  <a-modal
    :width="'1000px'"
    :visible="visible"
    :destroyOnClose="true"
    :maskClosable="false"
    :keyboard="false"
    @cancel="handleCancel"
    title="类别管理"
  >
    <template #footer>
      <a-button key="cancel" @click="handleCancel">取消</a-button>
    </template>
    <div class="hv-dashboard-category-manage">
      <a-form layout="inline" class="hv-dashboard-category-tools">
        <a-form-item>
          <a-input-search
            v-model:value="queryParams.dashboardCategoryLabel"
            placeholder="请输入标签名"
            enter-button
            class="hv-dashboard-category-tools-search"
            @search="initPageData"
          />
        </a-form-item>
        <a-form-item class="hv-dashboard-category-tools-btn-item">
          <a-button type="primary" @click="addRow()">
            <hv-dynamic-icon iconName="PlusOutlined" /> 添加一行
          </a-button>
        </a-form-item>
      </a-form>
      <div class="hv-dashboard-category-table" v-hv-scrollbar>
        <a-table :data-source="dataList" bordered :pagination="false">
          <a-table-column
            title="标签名"
            key="dashboardCategoryLabel"
            data-index="dashboardCategoryLabel"
            :width="350"
          >
            <template #default="{ record }">
              <a-input
                v-if="record.editInputVisible"
                v-model:value="record.dashboardCategoryLabel"
                placeholder="请输入标签名"
              />
              <div v-else class="hv-table-label">{{ record.dashboardCategoryLabel }}</div>
            </template>
          </a-table-column>
          <a-table-column
            title="描述"
            key="dashboardCategoryDescript"
            data-index="dashboardCategoryDescript"
          >
            <template #default="{ record }">
              <a-input
                v-if="record.editInputVisible"
                v-model:value="record.dashboardCategoryDescript"
                placeholder="请输入描述"
              />
              <div v-else class="hv-table-label">
                {{ record.dashboardCategoryDescript }}
              </div>
            </template>
          </a-table-column>
          <a-table-column key="action" title="操作" :width="160">
            <template #default="{ record, index }">
              <span>
                <a @click="record.editInputVisible = true" v-if="!record.editInputVisible">
                  编辑
                </a>
                <a v-if="record.editInputVisible" @click="saveDashboardCategory(record)"> 保存 </a>
                <template
                  v-if="
                    record.editInputVisible &&
                    record.dashboardCategoryId &&
                    record.dashboardCategoryId.length
                  "
                >
                  <a-divider type="vertical" />
                  <a @click="record.editInputVisible = false"> 取消 </a>
                </template>

                <a-divider type="vertical" />
                <a @click="deleteDashboardCategory(record, index)"> 删除 </a>
              </span>
            </template>
          </a-table-column>
        </a-table>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import DashboardCategoryApi from '@/visual/apis/dashboard-category-api';
  import type DashboardCategoryType from '@/visual/commons/types/dashboard-category-type';
  import HttpResultUtil from '@/visual/commons/utils/http-result-util';
  import { createVNode, ref, watch } from 'vue';
  import { useVisualConfigStore } from '@/visual/stores/visual-config';
  import { Modal, notification } from 'ant-design-vue';
  import { QuestionCircleOutlined } from '@ant-design/icons-vue';
  import { useSpinningStore } from '@/visual/stores/spinning';

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
  });

  const emit = defineEmits(['update:visible', 'reload']);

  const useVisualConfig = useVisualConfigStore();
  const useSpinning = useSpinningStore();

  const dataList = ref<DashboardCategoryType[]>([]);

  const queryParams = ref({
    dashboardCategoryLabel: '',
  });

  /**
   * 初始化页面数据
   */
  const initPageData = () => {
    useSpinning.setSpinningVisible(true);
    DashboardCategoryApi.queryDashboardCategoryList(queryParams.value).then(
      (res) => {
        useSpinning.setSpinningVisible(false);
        if (HttpResultUtil.isSuccess(res)) {
          if (res.data && res.data.responseData && res.data.responseData.length) {
            dataList.value = res.data.responseData;
          } else {
            dataList.value = [];
          }
        } else {
          HttpResultUtil.failureTipMsg(res);
        }
      },
      () => {
        useSpinning.setSpinningVisible(false);
      }
    );
  };

  const saveDashboardCategory = (record) => {
    if (!(record.dashboardCategoryLabel && record.dashboardCategoryLabel.length)) {
      notification.warning({
        message: '提示',
        description: '标签名不能为空！',
      });
      return;
    }
    useSpinning.setSpinningVisible(true);
    if (record.dashboardCategoryId && record.dashboardCategoryId.length) {
      DashboardCategoryApi.updateDashboardCategoryById({
        dashboardCategoryId: record.dashboardCategoryId,
        dashboardCategoryLabel: record.dashboardCategoryLabel,
        dashboardCategoryDescript: record.dashboardCategoryDescript,
        createUserId: useVisualConfig.getUserInfo.userId,
        createUser: useVisualConfig.getUserInfo.userName,
      }).then(
        (res) => {
          useSpinning.setSpinningVisible(false);
          if (HttpResultUtil.isSuccess(res)) {
            record.dashboardCategoryLabel = res.data.responseData.dashboardCategoryLabel;
            record.dashboardCategoryDescript = res.data.responseData.dashboardCategoryDescript;
            notification.success({
              message: '提示',
              description: res.data.msg,
            });
            emit('reload');
            record.editInputVisible = false;
          } else {
            HttpResultUtil.failureTipMsg(res);
          }
        },
        () => {
          useSpinning.setSpinningVisible(false);
        }
      );
    } else {
      DashboardCategoryApi.saveDashboardCategory({
        dashboardCategoryLabel: record.dashboardCategoryLabel,
        dashboardCategoryDescript: record.dashboardCategoryDescript,
        createUserId: useVisualConfig.getUserInfo.userId,
        createUser: useVisualConfig.getUserInfo.userName,
      }).then(
        (res) => {
          useSpinning.setSpinningVisible(false);
          if (HttpResultUtil.isSuccess(res)) {
            record.dashboardCategoryId = res.data.responseData.dashboardCategoryId;
            record.dashboardCategoryLabel = res.data.responseData.dashboardCategoryLabel;
            record.dashboardCategoryDescript = res.data.responseData.dashboardCategoryDescript;
            notification.success({
              message: '提示',
              description: res.data.msg,
            });
            emit('reload');
            record.editInputVisible = false;
          } else {
            HttpResultUtil.failureTipMsg(res);
          }
        },
        () => {}
      );
      useSpinning.setSpinningVisible(false);
    }
  };

  const deleteDashboardCategory = (record, index) => {
    if (record.dashboardCategoryId && record.dashboardCategoryId.length) {
      Modal.confirm({
        title: '确认',
        icon: createVNode(QuestionCircleOutlined),
        content: '您确认要删除吗？',
        onOk() {
          useSpinning.setSpinningVisible(true);
          DashboardCategoryApi.deleteDashboardCategoryByIds({
            ids: [record.dashboardCategoryId],
            createUserId: useVisualConfig.getUserInfo.userId,
            createUser: useVisualConfig.getUserInfo.userName,
          }).then(
            (res) => {
              useSpinning.setSpinningVisible(false);
              if (HttpResultUtil.isSuccess(res)) {
                dataList.value.splice(index, 1);
                notification.success({
                  message: '提示',
                  description: res.data.msg,
                });
                emit('reload');
              } else {
                HttpResultUtil.failureTipMsg(res);
              }
            },
            () => {
              useSpinning.setSpinningVisible(false);
            }
          );
        },
      });
    } else {
      dataList.value.splice(index, 1);
    }
  };

  const addRow = () => {
    dataList.value.push({
      dashboardCategoryId: '',
      dashboardCategoryLabel: '',
      dashboardCategoryDescript: '',
      editInputVisible: true,
    });
  };

  /**
   * 取消
   */
  const handleCancel = () => {
    emit('update:visible', false);
  };

  watch(
    () => props.visible,
    () => {
      props.visible && initPageData();
    },
    { immediate: false }
  );
</script>

<style lang="less" scoped>
  @import './DashboardCategoryManage.less';
</style>
